<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid #999;
            display: block;
        }
    </style>

</head>

<body>
    <div id="box1" class="box"></div>
    <br>
    <div id="box2" class="box"></div>
    <br>
    <script>
        let chartA = echarts.init(document.querySelector("#box1"));
        chartA.setOption({
            legend: {},
            tooltip: {},
            dataset: {
                // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
                // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
                // 如果不指定 dimensions，也可以通过指定 series.encode
                // 完成映射，参见后文。
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
                    { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
                    { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
                    { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        });

        let chartB = echarts.init(document.querySelector("#box2"));
        chartB.setOption({
            legend: {},
            tooltip: {},
            dataset: {
                // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
                // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
                // 如果不指定 dimensions，也可以通过指定 series.encode
                // 完成映射，参见后文。


                //与lengend数据交换按钮是一一对应的，但是如果数据集中的数据是对象数组，对象中的书属性名如果是字符串数值，这个不要省略
                dimensions: ['name', '袜子', '裤子', '裙子','外套'],
                source: [
                    { name: '星期一', '袜子': 43.3, '裤子': 85.8, '裙子': 93.7,'外套':100 },
                    { name: '星期二', '袜子': 83.1, '裤子': 73.4, '裙子': 55.1,'外套':102 },
                    { name: '星期三', '袜子': 86.4, '裤子': 65.2, '裙子': 82.5,'外套':103},
                    { name: '星期四', '袜子': 72.4, '裤子': 53.9, '裙子': 39.1,'外套':104 },
                    { name: '星期五', '袜子': 72.1, '裤子': 53.3, '裙子': 39.5,'外套':109 },
                    { name: '星期六', '袜子': 72.2, '裤子': 53.2, '裙子': 39.4,'外套':102 },
                    { name: '星期日', '袜子': 72.6, '裤子': 53.1, '裙子': 39.1,'外套':101 }
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' },{ type: 'bar' }]
        });
    </script>
</body>

</html>